<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转盘抽奖</title>

    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="box-lottery">
        <div class="lottery-wrap" style="transform: rotate(-45deg);">
            <span class="lottery-span1" data-id="8">
                <i>京东卡<br>10元</i><img src="img/lottery_01.png" alt="京东卡10">
            </span>
            <span class="lottery-span2" data-id="7">
                <i>京东卡<br>20元</i><img src="img/lottery_02.png" alt="京东卡20">
            </span>
            <span class="lottery-span3" data-id="6">
                <i>京东卡<br>50元</i><img src="img/lottery_03.png" alt="京东卡50">
            </span>
            <span class="lottery-span4" data-id="5">
                <i>京东卡<br>100元</i><img src="img/lottery_04.png" alt="京东卡100">
            </span>
            <span class="lottery-span5" data-id="1">
                <i>谢谢参与</i><img src="img/lottery_05.png" alt="谢谢参与">
            </span>
            <span class="lottery-span6" data-id="4">
                <i>京东卡<br>200元</i><img src="img/lottery_06.png" alt="京东卡200">
            </span>
            <span class="lottery-span7" data-id="3">
                <i>京东卡<br>500元</i><img src="img/lottery_07.png" alt="京东卡500">
            </span>
            <span class="lottery-span8" data-id="2">
                <i>iQOO Pro<br>手机</i><img src="img/lottery_08.png" alt="iQOO Pro">
            </span>
        </div>
        <a class="lottery-btn" href="javascript:void(0);"><i></i>立即抽奖</a>
    </div>

    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/lib/anime.min.js"></script>
    <script src="js/app/lottery.js"></script>
    <script>
        var Lottery = Turntable.create();
        $('.lottery-btn').on('click', function(){
            var num = Math.floor(Math.random() * 8);
            Lottery.start(num, function(index){
                alert($('span').eq(index).find('i').text());
                console.log('index', index, 'lottery-span', 'lottery-span'+(index+1));
            });
        });
    </script>
</body>

</html>